import { defineStore } from "pinia";
import { showDialog, showConfirmDialog } from "vant";
import router from "@/router";
import {
  checkPhone,
  sendSmsCode,
  checkCode,
  doFinishRegister,
} from "@/api/register";

export const useRegisterStore = defineStore("register", {
  state() {
    return {
      phone: "15200220005", // 手机号
      password: "", // 密码
      code: "", // 验证码
      codeCountDown: 0, // 验证码倒计时，0 - 表示可以再次发送 不为 0 已经发送过
    };
  },

  getters: {
    // 手机号页面按钮是否禁用
    phoneButtonIsDisabled(state) {
      const reg = /^1\d{10}/;
      return !reg.test(state.phone);
    },
    // 验证码页面按钮是否禁用
    codeButtonIsDisabled(state) {
      return state.code.length !== 5;
    },
    // 密码页面按钮是否禁用
    passwordButtonIsDisabled(state) {
      return state.password.length !== 5;
    },
  },

  actions: {
    /**
     * 第一个步骤页面的提交
     */
    async oneSubmit() {
      // 校验手机号是否可以注册
      await checkPhone(this.phone);
      // 可以注册，showDialog
      await showConfirmDialog({
        message: "恭喜你，该手机号可以注册，赶紧下一步吧",
      });
    },

    /**
     * 发送短信验证码
     */
    async sendMsg() {
      // 调用接口发送验证码
      await sendSmsCode(this.phone);
      // 发送成功，设置 codeCountDown = 60
      this.codeCountDown = 5;
      // 做一个计时器
      const timer = setInterval(() => {
        if (this.codeCountDown <= 0) {
          clearInterval(timer);
          return;
        }

        this.codeCountDown--;
      }, 1000);
    },

    /**
     * 第二个步骤页面的提交
     */
    async twoSubmit() {
      // 调用接口校验验证码
      await checkCode(this.phone, this.code);
      // 校验成功
      await showConfirmDialog({
        message: "校验成功，下一步吧",
      });
      // 要使用路由器的实例对象，
      //    1. 在页面上将实例对象作为参数传递到这个方法里面
      //    2. 直接当前文件引入 @/router
      router.push({ name: "step-3" });
    },

    /**
     * 第三个步骤页面的提交
     */
    async threeSubmit() {
      // 调用接口
      await doFinishRegister(this.phone, this.password);
      // 注册成功
      await showDialog({
        message: "恭喜你，注册成功，登录去吧",
      });
      router.push({ name: "login" });
    },
  },
});
